<template>
	<view class="upload-container">


		<!-- 图片预览区域 -->
		<view v-if="selectedImages != ''" class="image-list">
			<!-- src 可以是临时文件路径，也可以是上传成功后服务器返回的图片URL -->
			<image :src="selectedImages" mode="aspectFit" class="uploaded-image"></image>
			<!-- 可以根据需要添加删除按钮等 -->
		</view>
		<!-- 上传按钮 -->
		<button @click="chooseImage">选择并上传图片</button>
		<view v-if="selectedImages == ''" class="no-image">
			暂无图片
		</view>

		<!-- 上传状态或提示 -->
		<view v-if="uploading">
			正在上传...
		</view>
		<view v-if="uploadError">
			上传失败: {{ uploadError }}
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineEmits
	} from 'vue';

	// 存储选中的图片路径或服务器返回的图片URL
	const selectedImages = ref('');
	const uploading = ref(false);
	const uploadError = ref(null);
	const emit = defineEmits(['success'])
	// 你的后端图片上传接口地址
	// const uploadUrl = 'https://client-grave.shengxuankj.com/api/upload/image'; // <-- **请替换成你的实际上传接口地址**
	const uploadUrl = 'https://cqjsyh.com/api/upload/image'; // <-- **请替换成你的实际上传接口地址**

	// 选择图片并上传
	const chooseImage = async () => {
		uploadError.value = null; // 清除之前的错误

		uni.chooseImage({
			count: 1, // 默认9，这里设置为1，只允许选择一张
			sizeType: ['compressed', 'original'], // 可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
			success: (res) => {
				// res.tempFilePaths 是图片文件临时路径数组
				const tempFilePaths = res.tempFilePaths;

				if (tempFilePaths.length > 0) {
					// 将临时路径添加到预览列表（可选，也可以等上传成功后添加服务器URL）
					// 为了快速预览，先添加临时路径
					// selectedImages.value = tempFilePaths; // 如果只显示最新一张

					// 如果要显示所有选过的图片，需要concat
					selectedImages.value = selectedImages.value.concat(tempFilePaths);


					// 立即开始上传
					uploadFile(tempFilePaths[0]); // 只上传第一张选中的图片
				}
			},
			fail: (err) => {
				console.error('选择图片失败:', err);
				// 处理用户取消选择的情况，uni.chooseImage 取消也会进 fail
				// if (err.errMsg !== 'chooseImage:fail cancel') {
				//   uni.showToast({
				//     title: '选择图片失败',
				//     icon: 'none'
				//   });
				// }
			}
		});
	};

	// 上传文件到服务器
	const uploadFile = (filePath) => {
		console.log(uploadUrl)
		// if (!uploadUrl || uploadUrl !== 'https://client-grave.shengxuankj.com/api/upload/image') {
		if (!uploadUrl || uploadUrl !== 'https://cqjsyh.com/api/upload/image') {
			console.error('请设置正确的 uploadUrl');
			uploadError.value = '请设置正确的上传接口地址';
			return;
		}

		uploading.value = true;
		uploadError.value = null;
		uni.uploadFile({
			url: uploadUrl, // 开发者服务器 url
			filePath: filePath,
			name: 'file', // <--- **服务器接收文件的参数名，请根据后端接口调整**
			formData: {
				
			},
			header: {
				// 如果需要设置请求头，例如认证 token
				// 'Authorization': 'Bearer your_token'
			},
			success: (uploadRes) => {
				uploading.value = false;
				console.log('上传成功', uploadRes);

				// **重要：根据你的后端接口返回的数据结构，解析出图片的服务器地址**
				// uploadRes.data 是服务器返回的字符串，可能需要 JSON.parse()
				try {
					const resData = JSON.parse(uploadRes.data);
					// 假设服务器返回的数据结构是 { code: 0, data: { url: '服务器图片地址' }, msg: '成功' }
					if (resData.code === 1 && resData.data && resData.data.url) {
						const serverImageUrl = resData.data.uri;
						selectedImages.value = serverImageUrl
						uni.showToast({
							title: '上传成功',
							icon: 'success'
						});
						emit('success', serverImageUrl)

					} else {
						// 服务器返回数据格式不符合预期或上传失败（业务逻辑上）
						uploadError.value = resData.msg || '上传失败（服务器返回异常）';
						uni.showToast({
							title: uploadError.value,
							icon: 'none'
						});
						// 如果上传失败，可能需要从 selectedImages 中移除这个临时图片
						selectedImages.value = selectedImages.value.filter(item => item !== filePath);
					}

				} catch (e) {
					console.error('解析上传结果失败:', e);
					uploadError.value = '上传成功，但解析服务器结果失败';
					uni.showToast({
						title: '上传结果解析失败',
						icon: 'none'
					});
					// 如果解析失败，可能需要从 selectedImages 中移除这个临时图片
					selectedImages.value = selectedImages.value.filter(item => item !== filePath);
				}
			},
			fail: (uploadErr) => {
				uploading.value = false;
				uploadError.value = '上传请求失败';
				console.error('上传失败', uploadErr);
				uni.showToast({
					title: '上传失败',
					icon: 'none'
				});
				// 如果上传请求失败，需要从 selectedImages 中移除这个临时图片
				selectedImages.value = selectedImages(item => item !== filePath);
			},
			complete: () => {
				// 上传完成（无论成功或失败）
				uploading.value = false;
			}
		});
	};
</script>

<style lang="scss" scoped>
	.upload-container {
		padding: 20rpx;
	}

	.image-list {
		margin-top: 20rpx;
		display: flex; // 如果想横向排列
		flex-wrap: wrap; // 如果图片多可以换行
	}

	.image-item {
		margin-right: 20rpx; // 图片间距
		margin-bottom: 20rpx;
		border: 1rpx solid #eee;
		padding: 10rpx;
	}

	.uploaded-image {
		width: 200rpx; // 图片宽度
		height: 200rpx; // 图片高度，aspectFit会保持比例
	}

	.no-image {
		margin-top: 20rpx;
		color: #999;
		text-align: center;
	}
</style>